﻿@model List<CoffeeShop.Models.Entities.Product>

@{
    ViewBag.Title = "Quản lý sản phẩm";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home/Index">Trang chủ</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Quản lý sản phẩm</li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div>
        <h1 class="row-fluid header smaller lighter purple">
            <span class="span9">Quản lý sản phẩm</span>
            <span class="span3">
                <a data-toggle="modal" href="#tblAddProduct" class="pull-right inline">
                    <button class="btn btn-primary" id="btnAdd" onclick="loadCategoryUnitWhenAdd()">
                        <i class="icon-plus"></i>
                        Thêm mới
                    </button>
                </a>
            </span>
        </h1>
    </div>

    <div class="row-fluid" id="productsTable">
        @Html.Partial("_ProductList", Model)
    </div>

    <!-- Start form add new a product-->
    <div class="row-fluid">
        <div id="tblAddProduct" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin sản phẩm</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formAddProduct">
                    <div class="row-fluid">
                        <!-- Start image -->
                        <div class="span5">
                            <div class="ace-file-input ace-file-multiple">
                                <input type="file" id="imageAddFile">
                            </div>
                        </div>
                        <!-- End image -->

                        <div class="vspace"></div>

                        <div class="span7">
                            <!-- Start product Name -->
                            <div class="control-group" id="groupAddProductName">
                                <label class="control-label" for="form-field-username">Tên sản phẩm</label>
                                <div class="controls">
                                    <input type="text" id="txtAddProductName" name="txtAddProductName" placeholder="Tên sản phẩm">
                                    <div id="existedProductName" style="display: none" class="help-block">
                                        Tên sản phẩm đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                            <!-- End product Name -->

                            <!-- Start unit -->
                            <div class="control-group" id="groupAddProductUnit">
                                <label for="form-field-select-3">Đơn vị</label>
                                <div class="controls">
                                    <select name="cboAddUnit" id="cboAddUnit">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <!-- End unit -->

                            <!-- Start price -->
                            <div class="control-group" id="groupAddProductPrice">
                                <label class="control-label" for="form-field-username">Giá tiền</label>
                                <div class="controls">
                                    <input type="text" id="txtAddProductPrice" name="txtAddProductPrice" placeholder="Giá tiền">
                                </div>
                            </div>
                            <!-- End price -->

                            <!-- Start category -->
                            <div class="control-group" id="groupAddProductCategory">
                                <label for="form-field-select-3">Loại sản phẩm</label>
                                <div class="controls">
                                    <select name="cboAddCategory" id="cboAddCategory">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <!-- End category -->
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="addProduct()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- End form add new a product-->

    <!-- Start form update a product-->
    <div class="row-fluid">
        <div id="tblUpdateProduct" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin sản phẩm</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formUpdateProduct">
                    <div class="row-fluid">
                        <!-- Start image -->
                        <div class="span5">
                            <div class="ace-file-input ace-file-multiple">
                                <input type="file" id="imageUpdateFile">
                            </div>
                            <!-- Load current image of product -->
                            <div class="control-group">
                                <div class="controls">
                                    <label class="control-label">Ảnh sản phẩm</label>
                                    <ul class="ace-thumbnails">
                                        <li>
                                            <a>
                                                <img id="imageProductShow" src="#" alt="150x150" style="width: 150px; height: 150px" />
                                            </a>
                                            <div class="tools tools-bottom">
                                                <a href="#">
                                                    <i class="icon-link"></i>
                                                </a>

                                                <a href="#">
                                                    <i class="icon-paper-clip"></i>
                                                </a>

                                                <a href="#">
                                                    <i class="icon-pencil"></i>
                                                </a>

                                                <a href="#">
                                                    <i class="icon-remove red"></i>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- End image -->

                        <div class="vspace"></div>

                        <div class="span7">
                            <!-- Start productId -->
                            <input type="text" id="txtUpdateProductId" name="txtUpdateProductId" style="display: none">
                            <!-- End productId -->

                            <!-- Start product Name -->
                            <div class="control-group" id="groupUpdateProductName">
                                <label class="control-label" for="form-field-username">Tên sản phẩm</label>
                                <div class="controls">
                                    <input type="text" id="txtUpdateProductName" name="txtUpdateProductName" placeholder="Tên sản phẩm">
                                    <div id="existedUpdateProductName" style="display: none" class="help-block">
                                        Tên sản phẩm đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                            <!-- End product Name -->

                            <!-- Start unit -->
                            <div class="control-group" id="groupUpdateProductUnit">
                                <label for="form-field-select-3">Đơn vị</label>
                                <div class="controls">
                                    <select name="cboUpdateUnit" id="cboUpdateUnit">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <!-- End unit -->

                            <!-- Start price -->
                            <div class="control-group" id="groupUpdateProductPrice">
                                <label class="control-label" for="form-field-username">Giá tiền</label>
                                <div class="controls">
                                    <input type="text" id="txtUpdateProductPrice" name="txtUpdateProductPrice" placeholder="Giá tiền">
                                </div>
                            </div>
                            <!-- End price -->

                            <!-- Start category -->
                            <div class="control-group" id="groupUpdateProductCategory">
                                <label for="form-field-select-3">Loại sản phẩm</label>
                                <div class="controls">
                                    <select name="cboUpdateCategory" id="cboUpdateCategory">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <!-- End category -->
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="updateProduct()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- End form update a product-->
</div>
<script type="text/javascript">
    $(function () {
        $('#imageAddFile').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        $('#imageUpdateFile').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });
    })

    // Load all categories into "Loại sản phẩm" combobox
    function loadCategoryWhenAdd() {
        $.post("/Product/GetListCategory", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, category) {
                item += '<option value="' + category.ID + '">' + category.Name + '</option>';
            });
            $('#cboAddCategory').html(item);
            $("#cboAddCategory").trigger("chosen:updated");
        });
    }

    function loadUnitWhenAdd() {
        $.post("/Product/GetListUnit", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, unit) {
                item += '<option value="' + unit.ID + '">' + unit.Name + '</option>';
            });
            $('#cboAddUnit').html(item);
            $("#cboAddUnit").trigger("chosen:updated");
        });
    }

    function loadCategoryUnitWhenAdd() {
        loadCategoryWhenAdd();
        loadUnitWhenAdd();
    }

    // Validate Update Form
    function validateAddProduct(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtAddProductName: {
                    required: true,
                    maxlength: 50
                },
                cboAddUnit: {
                    required: true
                },
                txtAddProductPrice: {
                    required: true,
                    number: true
                },
                cboAddCategory: {
                    required: true,
                }
            },
            messages: {
                txtAddProductName: {
                    required: "Xin hãy nhập tên sản phẩm!",
                    maxlength: "Tên sản phẩm tối đa 50 ký tự!"
                },
                cboAddUnit: {
                    required: "Xin hãy chọn đơn vị!"
                },
                txtAddProductPrice: {
                    required: "Xin hãy nhập giá tiền sản phẩm!",
                    number: "Giá tiền sản phẩm chỉ có thể nhập số!"
                },
                cboAddCategory: {
                    required: "Xin hãy chọn loại sản phẩm!",
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when insert a new Area
    function showAddMessageError() {
        $.gritter.add({
            title: 'Tạo mới sản phẩm thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showMessageSuccess() {
        $.gritter.add({
            title: 'Tạo mới sản phẩm thành công!',
            text: 'Thông tin sản phẩm vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish insert a new Product
    function clearFormAddProduct() {
        $('#txtAddProductName').val('');
        $('#txtAddProductPrice').val('');
        $('#imageAddFile').val('');
    }

    // Add a new product method 
    function addProduct() {
        if ($('#formAddProduct').valid()) {
            editFr = $('#formAddProduct').val();
            var categoryName = $('#txtAddProductName', editFr).val();
            var price = $('#txtAddProductPrice', editFr).val();
            var unitId = $('#cboAddUnit option:selected', editFr).val();
            var categoryId = $('#cboAddCategory option:selected', editFr).val();
            var fileImage = document.getElementById('imageAddFile').files[0];

            var fd = new FormData();
            fd.append("fileImage", fileImage);
            fd.append("categoryName", categoryName);
            fd.append("price", price);
            fd.append("unitId", unitId);
            fd.append("categoryId", categoryId);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/Product/CreateProduct", false);
            xhr.send(fd);
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText == "ExistedProduct") {
                    // Show error duplicate message
                    $('#existedProductName').attr("style", "display: block");
                    $('#groupAddProductName').removeClass('info').addClass('error');
                }
                if (xhr.responseText == "CreateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddProduct();
                    showMessageSuccess();
                }
                if (xhr.responseText == "CreateFail") {
                    $('.close').click();
                    clearFormAddProduct();
                    showAddMessageError();
                }
                $('#imageAddFile').val("");
            }
            if (xhr.readyState == 4 && xhr.status != 200) {
                $('.close').click();
                showMessageError();
            }
        }
    }

    // Reload table when users finish update or insert a new area
    function reloadTable() {
        $.ajax({
            url: "/Product/LoadAllProducts",
            type: "POST",
            success: function (data) {
                $('#productsTable').html(data);
            }
        });
    }

    function getProductById(productId) {
        $.ajax({
            url: '@Url.Action("GetProductById", "Product")',
            type: 'GET',
            cache: false,
            data: { productId: productId },
            success: function (data) {
                $("#txtUpdateProductPrice").val(data.Price)
                if (data.IsDeleted == true) {
                    $("#txtUpdateProductId").val(data.ProductId).prop('readonly', true);
                    $("#txtUpdateProductName").val(data.ProductName).prop('readonly', true);
                    document.getElementById("imageProductShow").src = data.ImageURL;
                    loadUnitWhenUpdate(data.UnitId);
                    loadCategoryWhenUpdate(data.CategoryId);
                }
                else {
                    $("#txtUpdateProductId").val(data.ProductId).prop('readonly', true);
                    $("#txtUpdateProductName").val(data.ProductName).prop('readonly', false);
                    document.getElementById("imageProductShow").src = data.ImageURL;
                    loadUnitWhenUpdate(data.UnitId);
                    loadCategoryWhenUpdate(data.CategoryId);
                }
            },
            error: function (data) {
                alert('Không thể lấy dữ liệu. Xin hãy thử lại!');
            }
        });
    }

    // Show message error when insert a new Area
    function showUpdateMessageError() {
        $.gritter.add({
            title: 'Cập nhật sản phẩm thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showUpdateMessageSuccess() {
        $.gritter.add({
            title: 'Cập nhật sản phẩm thành công!',
            text: 'Thông tin sản phẩm đã được cập nhật!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Update a new product method 
    function updateProduct() {
        if ($('#formUpdateProduct').valid()) {
            editFr = $('#formUpdateProduct').val();
            var productId = $('#txtUpdateProductId', editFr).val();
            var productName = $('#txtUpdateProductName', editFr).val();
            var price = $('#txtUpdateProductPrice', editFr).val();
            var unitId = $('#cboUpdateUnit option:selected', editFr).val();
            var categoryId = $('#cboUpdateCategory option:selected', editFr).val();
            var fileImage = document.getElementById('imageUpdateFile').files[0];

            var fd = new FormData();
            fd.append("fileImage", fileImage);
            fd.append("productId", productId);
            fd.append("productName", productName);
            fd.append("price", price);
            fd.append("unitId", unitId);
            fd.append("categoryId", categoryId);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/Product/UpdateProduct", false);
            xhr.send(fd);
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText == "ExistedProduct") {
                    // Show error duplicate message
                    $('#existedUpdateProductName').attr("style", "display: block");
                    $('#groupUpdateProductName').removeClass('info').addClass('error');
                }
                if (xhr.responseText == "UpdateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddProduct();
                    showUpdateMessageSuccess();
                }
                if (xhr.responseText == "UpdateFail") {
                    $('.close').click();
                    clearFormAddProduct();
                    showUpdateMessageError();
                }
                $('#imageAddFile').val("");
            }
            if (xhr.readyState == 4 && xhr.status != 200) {
                $('.close').click();
                showUpdateMessageError();
            }
        }
    }

    function loadUnitWhenUpdate(unitId) {
        $.post("/Product/GetListUnit", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, unit) {
                if (unit.ID == unitId) {
                    item += '<option value="' + unit.ID + '" selected>' + unit.Name + '</option>';
                }
                else {
                    item += '<option value="' + unit.ID + '">' + unit.Name + '</option>';
                }
            });
            $('#cboUpdateUnit').html(item);
            $("#cboUpdateUnit").trigger("chosen:updated");
        });
    }

    // Load all categories into "Loại sản phẩm" combobox
    function loadCategoryWhenUpdate(categoryId) {
        $.post("/Product/GetListCategory", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, category) {
                if (category.ID == categoryId) {
                    item += '<option value="' + category.ID + '" selected>' + category.Name + '</option>';
                }
                else {
                    item += '<option value="' + category.ID + '">' + category.Name + '</option>';
                }
            });
            $('#cboUpdateCategory').html(item);
            $("#cboUpdateCategory").trigger("chosen:updated");
        });
    }
</script>
